<template>
  <div id="login_back" :style="{backgroundImage:'url('+background_image+')'}">
    <div id="from_back">
      <div id="from">
        <div align="center">
          <p style="font-size:30px;padding:10px;color:#E6A23C">{{adress_data.title}}</p>
          <p style="font-size:15px;padding:5px;color:#C0C4CC">{{adress_data.adress}}</p>
        </div>
        <el-form
          ref="form"
          :model="form"
          label-width="70px"
          size="small"
          label-position="left"
          style="padding: 10px;"
        >
          <el-form-item label="用户名">
            <el-input v-model="form.user_name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.user_password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="form.user_password" placeholder="确认密码" show-password></el-input>
          </el-form-item>
          <el-button type="warning" @click="onSubmit" style="width:100%">注册</el-button>
        </el-form>
        <div align="right" style="padding: 10px;">
          <el-button type="text" @click="$router.push('/')">登录</el-button>
          <el-button type="text" @click="$router.push('/forget')">找回密码</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      background_image: require('@/assets/login_back_image.jpg'),
      adress_data: {
        title: "注册",
        adress: "欢迎注册unit-ui"
      },
      form: {
        user_name: "",
        user_password: "",
        login_status: false
      }
    };
  },
  methods: {
    onSubmit() {
      this.$message.success("登录成功，即将为您跳转");
      if (sessionStorage.getItem("aside_menu") == null) {
        var menu = [];
        sessionStorage.setItem("aside_menu", JSON.stringify(menu));
      }
      setTimeout(() => {
        this.$router.push("/home");
      }, 1500);
    }
  }
};
</script>
<style scoped>
#login_back {
  width: 100%;
  height: 100vh;
  background-size: cover;
  position: relative;
}
#from_back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 400px;
  height: 350px;
  background: rgba(255, 255, 255, 0);
}
#from {
  width: 100%;
  height: 100%;
  margin-left: 25px;
  background-color: #ffffff;
  padding: 10px;
}
</style>